<template>
	<view class="deviceListLayOut">
		<view class="list">
			<view class="item" v-for="item in dataList" @click="selectCurrentDevice(item)">

				<view class="left">
					<view class="deviceImg">
						<image :src="item.headUrl"  mode="aspectFill"></image>
					</view>
					<view class="content">
						<view class="name">
							{{item.dvName==null?item.imei:item.dvName}}-{{getState(item.state)}}
						</view>
						<view class="time">
							imei:{{item.imei}}
						</view>
						<view class="state">
							{{getDeviceStatus(item.dvState)}}
						</view>
					</view>

				</view>

			</view>

		</view>
		<view class="no-record" v-show="dataList.length == 0">
			<image class="no-record-img" src="../../static/device/no_track_record.png">

			</image>
			<view class="no-record-text">{{$t('deviceList.noData')}}</view>
			<view class="addDevice" @click="addDevice">{{$t('deviceList.addDevice')}}</view>
		</view>
<!-- 
		<custom-modal v-model="showModal" title="提示" content="该设备尚未开通服务,请先去开通" confirm-bg-color="#53786C"
			confirm-color='#fff' @confirm="onConfirm" @cancel="onCancel"  /> -->



	</view>
</template>

<script setup>
	import {
		apiDeviceList
	} from '../../api/device_api';
	import {
		ref
	} from 'vue';
	import {
		onLoad,
		onReady,
	} from "@dcloudio/uni-app";
	import {
		onMounted
	} from 'vue';
	import {
		getDeviceStatus
	} from '../../utils/device_status';
	import {
		i18nTool
	} from '../../utils/i18en';
	import store from '../../store';

	import CustomModal from '@/components/custom-modal/custom-modal.vue';

	const showModal = ref(false)

	getDeviceStatus()
	const dataList = ref([]);
	const isClicked = ref(false);
	var currentItem = null
	onLoad(async () => {
		uni.setNavigationBarTitle({
			title: i18nTool("deviceList.navTitle")
		})
	})
	onReady(async () => {
		await apiDeviceList().then(res => {
			dataList.value = res.content;
		});
	})
	onMounted(() => {

	})


	function onConfirm() {
		uni.navigateTo({
			url: "/pages/subscribe/subscribe?data=" + currentItem.imei
		})
		
		// 处理确定逻辑
	}

	function onCancel() {
		console.log('点击了取消')
		// 处理取消逻辑
	}

	// 也可以通过ref调用方法
	const modalRef = ref(null)

	const openModal = () => {
		showModal.value = true
	}

	const closeModal = () => {
		
	}


	//2绑定，-1解绑, 1分享过来的
	const getState = (state) => {
		switch (state) {
			case -1:
				return i18nTool('deviceList.unbinding')
				break;
			case 1:
				return i18nTool('deviceList.share')
				break;
			case 2:
				return i18nTool('deviceList.binding')
				break;
			default:
				break;
		}
	}
	const selectCurrentDevice = (item) => {
		
		let user = uni.getStorageSync('user');
		uni.setStorageSync(user.userId, item.imei);
		store.commit('setNewImei', item.imei);
		uni.navigateBack({
			delta: 1
		});
		
		// if (item.subscribed == 0 && item.state == 2) {
		// 	currentItem = item
		// 	openModal();
		// } else {
		// 	let user = uni.getStorageSync('user');
		// 	uni.setStorageSync(user.userId, item.imei);
		// 	store.commit('setNewImei', item.imei);
		// 	uni.navigateBack({
		// 		delta: 1
		// 	});
		// }

	}

	function addDevice() {
		uni.navigateTo({
			url: "/pages/add_device/add_device"
		})
	}
</script>

<style lang="scss" scoped>
	.deviceListLayOut {
		background-color: #f6f6f6;
		width: 100vw;
		height: 100vh;

		.list {

			.item {
				border-bottom: 2rpx solid #f6f6f6;
				padding: 30rpx 20rpx;
				margin: 20rpx 20rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				background-color: #fff;
				border-radius: 10rpx;
				box-shadow: 0rpx 0rpx 2rpx 2rpx rgba(1, 1, 1, 0.1);

				.left {
					display: flex;
					justify-content: start;
					align-items: center;

					.deviceImg {
						height: 100rpx;
						width: 100rpx;
						border-radius: 50%;
						overflow: hidden;
						image {
							width: 100%;
							height: 100%;
							border-radius: 50%;
						}
					}

					.content {
						padding-left: 20rpx;

						.name {
							font-size: 28rpx;
							color: #333333;
						}

						.time {
							font-size: 24rpx;
							color: #666666;
						}

						.state {
							font-size: 24rpx;
							color: #666666;
						}
					}

					;
				}


			}
		}
	}

	.no-record {
		background-color: #fff;
		position: fixed;
		bottom: 0;
		top: 0;
		left: 0;
		right: 0;
		display: flex;
		justify-content: center;
		flex-direction: column;
		align-items: center;
		z-index: 100000;

		.no-record-img {
			width: 100rpx;
			height: 100rpx;
		}

		.no-record-text {
			font-size: 26rpx;
			color: #666;
		}

		.addDevice {
			margin-top: 20rpx;
			width: 200rpx;
			height: 80rpx;
			border-radius: 40rpx;
			background-color: #53786C;
			align-items: center;
			justify-content: center;
			display: flex;
			color: #fff;
		}


	}
</style>